<template>
	<div class="setting">
		<!-- <nav-back></nav-back> -->
		<div class="bind-taobao">
			<div class="bind-taobao-left">
				<svg-icon class="t-icon" iconName="round-taobao"></svg-icon>
				淘宝账户绑定
			</div>
			<div class="go-bindding" v-if="!userInfo.tbUserId" @click="bangdingTB">
				去绑定
				<svg-icon class="icon" iconName="forward"></svg-icon>
			</div>
			<div class="cancel-bind" v-if="userInfo.tbUserId">
				<div class=" go-bindding bindding-ok" v-if="userInfo.tbStatus === 1">
					{{ userInfo.tbAccount }}
				</div>
				<div class="go-bindding" @click="cancelBangdingTB" v-if="userInfo.tbStatus === 1">
					解绑
					<svg-icon class="icon" iconName="forward"></svg-icon>
				</div>

				<div class=" go-bindding bindding-ok" v-if="userInfo.tbStatus === 2">
					未实名认证
				</div>
				<div class="go-bindding" v-if="userInfo.tbStatus === 2" @click="bangdingTB">
					更换绑定
					<svg-icon class="icon" iconName="forward"></svg-icon>
				</div>

				<div class=" go-bindding bindding-ok" v-if="userInfo.tbStatus === 3">
					授权过期/已解绑
				</div>
				<div class="go-bindding" v-if="userInfo.tbStatus === 3" @click="bangdingTB">
					重新绑定
					<svg-icon class="icon" iconName="forward"></svg-icon>
				</div>
			</div>
		</div>
		<div class="bind-taobao">
			<div class="bind-taobao-left">
				<svg-icon class="t-icon" iconName="round-yzf"></svg-icon>
				翼支付账户绑定
			</div>
			<div class="go-bindding" v-if="bindYizhifu" @click="bindYizhifu = false">
				去绑定
				<svg-icon class="icon" iconName="forward"></svg-icon>
			</div>
			<div class=" go-bindding bindding-ok" v-else>{{ userInfo.phone | phoneMask }}</div>
		</div>
		<div class="ok-btn" @click="$router.back(1)">确 认</div>

		<div class="logout-btn" @click="onLogout">切换账号</div>

		<div class="footer"><a @click="$router.push('/agreement')">用户协议</a>和<a @click="$router.push('/policy')">隐私政策</a></div>
	</div>
</template>

<script>
import { Dialog } from 'vant';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			bindTaobao: true,
			bindYizhifu: false
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		console.log(this.userInfo);
	},
	methods: {
		bangdingTB() {
			let params = {
				backUrl: '/index'
			};
			// 绑定淘宝账号
			this.$service.shopping.taobao.getlink(params).then(res => {
				window.location.href = res;
			});
		},
		cancelBangdingTB() {
			Dialog.confirm({
				title: '温馨提示',
				message: '确认解绑？',
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				closeOnPopstate: true
			}).then(() => {
				let params = {
					tbUserId: this.userInfo.tbUserId
				};
				this.$service.shopping.taobao
					.unBind(params)
					.then(() => {
						this.$toast('解绑成功');
						this.$store.dispatch('GET_USERINFO');
					})
					.catch(err => {
						this.$toast(err.message);
					});
			});
		},
		onLogout() {
			this.$store.dispatch('SWITCH');
		}
	}
};
</script>

<style lang="scss" scoped>
.setting {
	/* prettier-ignore */
	font-size: 14PX;
	.bind-taobao {
		width: 698px;
		height: 100px;
		background: rgba(255, 255, 255, 1);
		border-radius: 16px;
		margin: 20px auto 0 auto;
		display: flex;
		align-items: center;
		padding-left: 16px;
		@include flexBox(space-between, center);
		.bind-taobao-left {
			@include flexBox(flex-end, center);
		}
		.t-icon {
			/* prettier-ignore */
			font-size: 25PX;
			margin-right: 18px;
		}
		.go-bindding {
			@include flexBox(center, center);
			margin-right: 32px;
			color: $main-color;
			.icon {
				/* prettier-ignore */
				font-size :18PX;
			}
		}
		.bindding-ok {
			color: #717076;
		}
		.cancel-bind {
			display: flex;
		}
	}
	.ok-btn {
		width: 336px;
		height: 80px;
		line-height: 80px;
		background: $main-color;
		border-radius: 40px;
		font-size: 28px;
		text-align: center;
		color: #ffffff;
		margin: 84px auto 0 auto;
		font-weight: 400;
	}

	.logout-btn {
		width: 336px;
		height: 80px;
		line-height: 80px;
		border-radius: 40px;
		font-size: 28px;
		text-align: center;
		background-color: #fff;
		color: $main-color;
		margin: 40px auto 0 auto;
		font-weight: 400;
	}

	.footer {
		text-align: center;
		position: fixed;
		bottom: 80px;
		width: 100%;
		color: #289af1;
	}
}
</style>
